import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { MessageService, TreeComponent, TreeNode } from '@iux/live';
import { cloneDeep, remove } from 'lodash';

@Component({
  selector: 'app-operate',
  templateUrl: './operate.component.html',
  styles: [
    `
      .tree-container {
        display: flex;
        flex-direction: column;
        box-sizing: content-box;
        width: 360px;
        height: 378px;
        padding: 16px;
        border: 1px solid #d9d9d9;
        overflow: auto;
      }
      .tree-container > .lv-group {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #e6e6e6;
      }
      .tree-container .lv-search {
        width: 100%;
        margin-bottom: 8px;
      }
      .lv-tree {
        max-height: 400px;
        overflow: auto;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OperateComponent implements OnInit {
  data: TreeNode[];
  cacheData: TreeNode[];
  selection: TreeNode[] = [];

  @ViewChild(TreeComponent, { static: false }) lvTree: TreeComponent;

  constructor(private messageService: MessageService) {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.data = [
      {
        label: 'Documents', // 默认内容icon
        children: [
          {
            label: 'Expenses.doc',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Word', // 自定义内容icon
        contentToggleIcon: {
          true: 'icon-light-mode',
          false: 'icon-dark-mode',
        },
        children: [
          {
            label: 'Expenses.doc',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Pictures', // 不显示内容icon
        contentToggleIcon: '',
        children: [
          {
            label: 'logo.png',
            isLeaf: true,
          },
          {
            label: 'banner.pnd',
            isLeaf: true,
          },
        ],
      },
    ];
    this.cacheData = cloneDeep(this.data);
  }

  add() {
    const node = this.selection && this.selection[0],
      newNode = {
        label: 'New Node',
        isLeaf: true,
      };
    if (!node) {
      this.data = [...this.data, newNode];
      return;
    }

    if (!node.children || !node.children.length) {
      node.children = [];
    }
    node.isLeaf = false;
    node.expanded = true;
    node.children.push(newNode);
    this.data = [...this.data];
  }

  delete() {
    const node = this.getActiveNode();
    if (!node) {
      return;
    }

    const { parent } = node;
    let cacheItem;

    if (!parent) {
      cacheItem = remove(this.data, item => item === node);
    } else {
      cacheItem = remove(parent.children, item => item === node);
      parent.isLeaf = !parent.children.length;
    }

    this.data = [...this.data];
    this.lvTree.deleteSelection(cacheItem);
  }

  update() {
    const node = this.getActiveNode();
    if (!node) {
      return;
    }
    node['isEdit'] = true;
  }

  updateSave(node, e) {
    const label = e.target.value;
    if (!label) {
      return this.messageService.warning('name cannot be empty');
    }
    node.label = label;
    node['isEdit'] = false;
    this.data = [...this.data];
  }

  refresh() {
    this.data = cloneDeep(this.cacheData);
  }

  getActiveNode() {
    if (!this.selection || !this.selection.length) {
      this.messageService.warning('Need to choose a node');
      return;
    } else {
      return this.selection[0];
    }
  }
}
